
<!DOCTYPE HTML>
<html>
    <head>
        <title>Youniversity</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        
        <link rel="stylesheet" href="style/style.css"/>
        <script src="js/lib/cordova-1.7.0.js"></script>
        <script src="js/lib/iscroll.js"></script>

        <script type="text/javascript">

            var scroll2, scrollableframe;
            function loaded() {
                scrollableframe = new iScroll('scrollableframe',
                                      { useTransition:false,
                                        checkDOMChanges: true,
                                        hideScrollbar: true,
                                        fixedScrollbar:true,
                                        bounceLock: true }
                                    );

                scroll2 = new iScroll('corsi',
                                      { useTransition:false,
                                        checkDOMChanges: true,
                                        hideScrollbar: true,
                                        fixedScrollbar:true,
                                        onBeforeScrollStart : function(e) { scrollableframe.disable();},
                                        onBeforeScrollEnd : function(e) { scrollableframe.enable();} } /*per evitare che scrollando un elemento
                                                                                                     figlio si scrolli anche il padre*/
                                    );
                
                $('.ac-container article.selectable ul > li')
                    .on('touchstart', function () {
                        $(this).addClass('fake-active');
                    })
                    .on('touchend', function() {
                        $(this).removeClass('fake-active');
                    })
                    .on('touchcancel', function() {
                        $(this).removeClass('fake-active');
                    });
                    
                $('.button')
                    .on('touchstart', function () {
                        $(this).addClass('fake-active');
                    })
                    .on('touchend', function() {
                        $(this).removeClass('fake-active');
                    })
                    .on('touchcancel', function() {
                        $(this).removeClass('fake-active');
                    });

                var allSelects = $('button');
                allSelects.each(function(index, item) {
                                  item.addEventListener('touchstart', function(e) { /*e.stopPropagation();*/ $(this).addClass("fake-active"); }, false);
                                  item.addEventListener('touchend', function(e) { $(this).removeClass("fake-active"); }, false);
                                  item.addEventListener('touchcancel', function(e) { $(this).removeClass("fake-active"); }, false);
                                });
            }

            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', loaded, false);
            // document.addEventListener('resize', scroll3.refresh, false); 

        </script>

    </head>
    <body class="page">

        <nav>
            <ul>
                <li><a href="explore.html"><img src="resources/img/explore.png"></a></li>
                <li><a href="plan.html"><img src="resources/img/plan.png"></a></li>
                <li><a href="personal.html"><img src="resources/img/personal.png"></a></li>
                <li><a href="events.html"><img src="resources/img/events.png"></a></li>
                <li><a href="updates.html"><img src="resources/img/updates.png"></a></li>
            </ul>
        </nav>
        <header>Roger Flenting</header>

        <div id="scrollableframe">
            <div class="scroller">

                <div class="frame">
                    <div class="badge">
                        <img class="picture" src="resources/img/teacher2.png">
                        <ul>
                            <li class="title1">Universita' degli Studi dell'Aquila</li>
                            <li class="title2">Scienze mm.ff.nn.</li>
                            <li class="subtitle1"><span class="label">Matricola:</span> 098733</li>
                            <li class="subtitle2">Professore</li>
                        </ul>
                    </div>
                    
                    <br>

                    <section class="ac-container">
                        <div>
                            <input id="ac-2" name="accordion-1" type="checkbox" checked/>
                            
                                <label for="ac-2">Corsi tenuti</label>
                                <article class="selectable">
                                    <div id="corsi" class="scrollerbox">
                                        <div class="scroller">
                                            <ul>
                                                <li>Matematica Discreta</li>
                                                <li>Analisi Matematica</li>
                                            </ul>
                                        </div>
                                    </div>
                                </article>
                        </div>
                    </section>


                </div>
                <div class="centercontent horizontal">
                    <a href="new-notice.html" class="button">
                        <span class="icon addadvice"></span></a>
                    <a href="addcourse.html" class="button">
                        <span class="icon addcourse"></span></a>
                    <a href="explore.html" class="button">
                        <span class="icon appointment"></span></a>
                </div>

            </div>
        </div>

        <script src="js/lib/zepto.min.js"></script>
        <script src="js/ynv.js"></script>
    </body>
</html>